<template>
    <div class="bblock-erc20-swaprecord-container layout-padding">
        <!-- 最底层 -->
        <el-card shadow="hover" class="layout-padding-auto">
            <el-card shadow="hover">
                <div class="bar_btn_div">
                    <div class="title_div">
                        <div>筛选</div>
                    </div>
                    <div>
                        <el-button size="default" @click.native.prevent="handleResetSearch()">重置搜索</el-button>
                        <el-button type="primary" size="default" @click.native.prevent="refresh()">查询搜索</el-button>
                    </div>
                </div>
                <div class="search_div">
                    <el-form :model="state.ruleForm" label-width="100px">
                        <div style="display: flex; flex-wrap: wrap">

                            <!-- <el-form-item label="ID">
                                <el-input v-model="state.ruleForm.tokenTransRecordId" class="input-width" placeholder="ID"></el-input>
                            </el-form-item> -->

                            <el-form-item label="交易hash">
                                <el-input v-model="state.ruleForm.transactionHash" class="input-width" placeholder="hash" clearable></el-input>
                            </el-form-item>

                            <!-- <el-form-item label="合约地址">
                                <el-select clearable v-model="state.ruleForm.tokenAddressConfigId" placeholder="服务名称">
                                    <el-option v-for="item in state.contractList" :label="item.symbol + '(' + item.contractAddress + ')'"
                                        :value="item.contractConfigId" :key="item.contractConfigId">
                                    </el-option>
                                </el-select>
                            </el-form-item> -->

                            <el-form-item label="交易类型" >
                                <el-select v-model="state.ruleForm.buyOrSale" placeholder="请选择" clearable >
                                    <el-option v-for="item in  state.ruleForm.transType" :key="item.value" :label="item.label" :value="item.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="交易地址">
                                <el-input v-model="state.ruleForm.toAddress" class="input-width" placeholder="交易地址" clearable></el-input>
                            </el-form-item>
                            <el-form-item label="区块时间">
                                <el-date-picker clearable v-model="state.ruleForm.blockTimestamp" type="datetimerange" :picker-options="state.pickerOptions"
                                    range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" 
                                    value-format="YYYY-MM-DD hh:mm:ss">
                                </el-date-picker>
                            </el-form-item>

                        </div>
                    </el-form>
                </div>
            </el-card>
            <el-card style="margin-top: 20px;" shadow="hover" class="layout-padding-auto">
                <el-table size="default" :data="state.tableData" style="width: 100%" :header-cell-class-name="handleHeaderClass" @sort-change="onSortHandler">
                    <el-table-column align="center" label="id" width="50">
                        <template #default="scope">
                            <span>{{ scope.row.tokenSwapRecordId }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="Pari地址" prop="pairAddress" sortable="custom" show-overflow-tooltip>
                        <template #default="scope">
                            <span>{{ scope.row.pairAddress }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="hash" width="160" show-overflow-tooltip>
                        <template #default="scope">
                            <span>{{ scope.row.transactionHash }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="交易地址" show-overflow-tooltip>
                        <template #default="scope">
                            <span>{{ scope.row.toAddress }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" width='80' label="交易类型" show-overflow-tooltip>
                        <template #default="scope">
                            <el-tag :type="scope.row.buyOrSale == 10 ? 'success' : 'danger'">{{ scope.row.buyOrSale == 10 ? '买入' : '卖出' }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column align="right" label="成交金额" sortable="custom" prop="amount_in" show-overflow-tooltip>
                        <template #default="scope">
                            <span>{{ scope.row.amountInSymbol + " " }} {{ scope.row.amountIn.toFixed(8) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="right" label="成交量" sortable="custom" prop="amount_out" show-overflow-tooltip>
                        <template #default="scope">
                            <span>{{ scope.row.amountOutSymbol + " " }}{{ scope.row.amountOut.toFixed(8) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="right" label="价格" sortable="custom" prop="price" show-overflow-tooltip>
                        <template #default="scope">
                            <span>{{ scope.row.priceSymbol + " " }}{{ scope.row.price.toFixed(8) }}</span>
                        </template>
                    </el-table-column>


                    <el-table-column align="center" label="区块高度" width="120" sortable="custom" prop="block_numer">
                        <template #default="scope">
                            <span>{{ scope.row.blockNumber }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column width="200" align="center" label="区块时间" prop="blockTimestamp" sortable="custom">
                        <template #default="scope">
                            <span>{{ formatDate(new Date(scope.row.blockTimestamp), "YYYY-mm-dd HH:MM:SS") }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column width="200" align="center" label="创建时间" prop="createDate" sortable="custom">
                        <template #default="scope">
                            <span>{{ formatDate(new Date(scope.row.createDate), "YYYY-mm-dd HH:MM:SS") }}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>

            <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange" class="mt15" :pager-count="5" :page-sizes="[10, 20, 30]"
                v-model:current-page="state.ruleForm.page" background v-model:page-size="state.ruleForm.limit" layout="total, sizes, prev, pager, next, jumper"
                :total="state.ruleForm.total">
            </el-pagination>

        </el-card>
    </div>
</template>

<script setup lang="ts" name="blockerc20swaprecordindex">

import { formatDate } from '../../../../utils/formatTime';
import { reactive, onMounted, ref, defineAsyncComponent } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
// 导入接口
import { useBlockApi } from "../../../../api/block";

import { camelToUnderline } from '/@/utils/StringFormat';

const state = reactive({
    tableData: [],
    ruleForm: {
        page: 1,
        limit: 10,
        total: 0,
        transType: [{ value: 10, label: "买入" }, { value: 20, label: "卖出" }],
        tokenAddressConfigId: "",
        toAddress: "",
        transactionHash: "",
        tokenAddress: "",
        blockTimestamp: [],
        createDate: [],
        buyOrSale: "",

    },
    sorts: { "blockTimestamp": "descending", "pairAddress": "descending" },
    contractList: [] as any,
    pickerOptions: {
        shortcuts: [
            {
                text: "最近一周",
                onClick(picker: any) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(
                        start.getTime() - 3600 * 1000 * 24 * 7
                    );
                    picker.$emit("pick", [start, end]);
                },
            },
            {
                text: "最近一个月",
                onClick(picker: any) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(
                        start.getTime() - 3600 * 1000 * 24 * 30
                    );
                    picker.$emit("pick", [start, end]);
                },
            },
            {
                text: "最近三个月",
                onClick(picker: any) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(
                        start.getTime() - 3600 * 1000 * 24 * 90
                    );
                    picker.$emit("pick", [start, end]);
                },
            },
        ],
    },
});

const handleHeaderClass = (column: any) => {
    if (column.column.property) {
        column.column.order = state.sorts[column.column.property];
    }
};
const sortsStr = () => {
    var result = "";
    for (var prop in state.sorts) {
        result += camelToUnderline(prop) + (state.sorts[prop] == "descending" ? " desc," : " asc,")
    }
    if (result == "") {
        return null;
    }
    return result.substring(0, result.length - 1)
};
const onSortHandler = (column: any) => {
    if (column.order) {
        state.sorts[column.prop] = column.order
    } else if (state.sorts[column.prop]) {
        delete state.sorts[column.prop];
    }
    getSwapTokenRecord();
};

const handleResetSearch = () => {
    state.ruleForm = {
        page: 1,
        limit: 10,
        total: 0,
        transType: [{ value: 10, label: "买入" }, { value: 20, label: "卖出" }],
        tokenAddressConfigId: "",
        toAddress: "",
        transactionHash: "",
        tokenAddress: "",
        blockTimestamp: [],
        createDate: [],
        buyOrSale: "",
    };
    getSwapTokenRecord();
}

const refresh = () => {
    getSwapTokenRecord();
}

// 获取合约列表
const handlegetContractList = async () => {
    let vo = {
        page: 1,
        limit: 999,
    }
    state.contractList = [];
    let listTemp = await useBlockApi().getContractList(vo);
    state.contractList = listTemp.list;
}

// 分页改变
const onHandleSizeChange = (val: number) => {
    state.ruleForm.limit = val;
    getSwapTokenRecord();
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
    state.ruleForm.page = val;
    getSwapTokenRecord();
};
const getSwapTokenRecord = async () => {
    try {
        let vo = {
            transactionHash: state.ruleForm.transactionHash,
            pairAddress: state.ruleForm.tokenAddress,
            toAddress: state.ruleForm.toAddress,
            blockTimestamp: state.ruleForm.blockTimestamp,
            buyOrSale: state.ruleForm.buyOrSale
        };
        let listTemp = await useBlockApi().getSwapTokenRecord(state.ruleForm.limit, state.ruleForm.page, vo, sortsStr());
        state.ruleForm.total = listTemp.total;
        state.tableData = listTemp.list;


    } catch (error: any) {
        ElMessage.error(error.msg);
    }
}


// 页面加载时
onMounted(async () => {
    //await getServices();
    // await handlegetContractList();
    await getSwapTokenRecord();
});







</script>





<style lang="scss" scoped>
.el-form .el-form-item:last-of-type {
    margin-bottom: 22px !important;
}

.bar_tools {
    display: flex;
    flex-direction: row-reverse;
    margin-bottom: 10px;
}

.bblock-erc20-swaprecord-container {
    :deep(.el-card__body) {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: auto;

        .el-table {
            flex: 1;
        }
    }
}

.bar_btn_div {
    display: flex;
    padding: 20px;
    border: 1px solid #ebeef5;
    align-items: center;
    justify-content: space-between;
    border-radius: 5px 5px 0px 0px;

    .title_div {
        display: flex;
        font-size: 16px;

        &>div {
            margin-right: 10px;
        }
    }
}

.search_div {
    border: 1px solid #ebeef5;
    border-top: 0px;
    border-radius: 0px 0px 5px 5px;
    padding: 20px;
    padding-bottom: 0px;
}
</style>
